//搜索页
$('.header .container .center button').on('click', function () {
    location.href='./search.html'
})  
  /*选项卡
       1. 设置点击样式
       2. .清除样式
        3.点击事件设置样式*/
  let liEle = $('.nav .container ul>li')

  function onTab() {
      for (let i = 0; i < liEle.length; i++) {
          liEle[i].onclick = function () {
              clear() //清除样式
              this.classList.add('active')
          }
      }
  }
  onTab()

  function clear() {
      for (let i = 0; i < liEle.length; i++) {
          liEle[i].classList.remove('active')
      }

  }


  //获取列表数据
  function onProductList(page) {
      let start = page * 10
      $.ajax({
          url: "https://xiongmaoyouxuan.com/api/sub_column/7/items?start=" + start,
          type: 'get',
          success: function (res) {
              show(res.data.list)
              console.log(res)
          },
          error: function (error) {
              console.log(error)
          }
      })
  }

  //动态喧嚷列表
  let strMore = '' //全局的列表字符串

  function show(productList) {
      let productListStr = productList.map(function (item) {
          return `<div class="show" onclick=onDetail(${item.id})>
                             <img src="${item.image}"
                                width="280px" height="390px" alt="">
                             <div>${item.title}</div>
                             <div class="platform"><span>天猫</span> <span>包邮</span></div>
                             <div class='price'><span>￥${item.price}</span><span>${item.saleNum}人已买</span> <span>${item.couponValue}</span></div>
 
                         </div>`
      }).join('')
      strMore = strMore + productListStr
      $('.list .container').html(strMore)
  }

  //加载更多
  function more() {
      let page = 1 //页号
      onProductList(page)

      $('.btn').click(function () {
          onProductList(++page)
      })
  }
  more()

  //回到顶部
  $('.back button').click(function () {

      let timer = setInterval(function () {
          document.documentElement.scrollTop = document.documentElement.scrollTop - 100
          if (document.documentElement.scrollTop <= 0) {
              clearInterval(timer)
          }
      }, 50)
  })
  //跳转到详情页
  function onDetail(id) {

      location.href = 'details.html?id=' + id
      
  }


  //返回 首页
  function onHomePage() {
      location.href = 'index.html'
  }